<template>
  <div class="props-table">
    <!--  :class="{ 'no-text': !value.text }" -->
    <div v-for="(value, key) in finalProps" :key="key" class="prop-item" :id="`item-${key}`">
      <!-- lable -->
      <span class="label" v-if="value.text">{{ value.text }}</span>
      <!-- 对应的组件 -->
      <div :class="`prop-component component-${value.component}`">
        <component
          v-if="value"
          :is="value.component"
          :value="value.value"
          v-bind="value.extraProps"
          v-on="value.events"
        >
          <!-- 子组件（下拉框） -->
          <template v-if="value.options">
            <component
              :is="value.subComponent"
              v-for="(option, k) in value.options"
              :key="k"
              :value="option.value"
            >
              <render-vnode :vNode="option.text"></render-vnode>
            </component>
          </template>
        </component>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { defineEmits, defineProps, computed, PropType, VNode } from 'vue';
import { reduce } from 'lodash-es';
import { mapPropsToForms, PropsToForms } from '../propsMap';
import { AllComponentProps } from 'lego-bricks';
import RenderVnode from './RenderVnode';
interface FormProps {
  component: string;
  subComponent?: string;
  value: string;
  extraProps?: { [key: string]: any };
  text?: string;
  options?: { text: string | VNode; value: any }[];
  valueProp: string;
  eventName: string;
  events: { [key: string]: (e: any) => void };
}
const emits = defineEmits(['change']);
const props: any = defineProps({
  props: {
    type: Object as PropType<any>,
    required: true
  }
});
/**
 * 将props中的属性值映射到表单项中
 */
const finalProps = computed(() => {
  return reduce(
    props.props,
    (result, value, key) => {
      const newKey = key as keyof AllComponentProps;
      const item = mapPropsToForms[newKey];
      // console.log(key, item, 'item');
      if (item) {
        const { valueProp = 'value', eventName = 'change', initalTransform, afterTransform } = item;
        //initalTransform 对初始值转化
        const newItem: FormProps = {
          ...item,
          value: initalTransform ? initalTransform(value) : value,
          valueProp,
          eventName,
          // 组件事件
          events: {
            [eventName]: (e: any) => {
              // console.log(e, 'e');
              emits('change', {
                key,
                value: afterTransform ? afterTransform(e) : e
              });
            }
          }
        };
        result[newKey] = newItem;
      }
      return result;
    },
    {} as any
  );
});
console.log(finalProps.value, props.props);
</script>

<style scoped>
.prop-item {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}
.label {
  padding-left: 5px;
  width: 20%;
}
.prop-component {
  width: 70%;
}
.prop-item.no-text {
  display: inline-block;
  margin: 0 10px 0 0;
}
#item-fontWeight {
  margin-left: 28%;
}
.component-a-select .ant-select {
  width: 150px;
}
.prop-component.component-shadow-picker,
.prop-component.component-image-processer,
.prop-component.component-background-processer {
  width: 100%;
}
</style>
